<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>

<body>
<!-- 通过影子dom完成沙箱隔离 css -->
<p>asd1</p>
<!-- 子应用挂在带你 -->
<div class="subapp">
    
</div>
</body>
</html>
<script>
//  1.拿到挂在点
// 2.创建影子dom
// 3.将子应用挂载到影子上
    let subapp = document.querySelector('.subapp')
    let shadow = subapp.attachShadow({ mode: 'open' })
    shadow.innerHTML = `
    <p>你好</p>
    <style>
        p {
            color: red;
        }
    </style>
    `
</script>